<template>
  <teleport to="body">
    <transition-group name="message" tag="div" class="message-container">
      <div
        v-for="message in messages"
        :key="message.id"
        :class="[
          'message-item',
          `message-${message.type}`,
          { 'message-closable': message.showClose }
        ]"
      >
        <div class="message-content">
          <div class="message-icon">
            <svg v-if="message.type === 'success'" viewBox="0 0 24 24" fill="currentColor">
              <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
            </svg>
            <svg v-else-if="message.type === 'error'" viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
            </svg>
            <svg v-else-if="message.type === 'warning'" viewBox="0 0 24 24" fill="currentColor">
              <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
            </svg>
            <svg v-else viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
            </svg>
          </div>
          <div class="message-text">{{ message.content }}</div>
          <button
            v-if="message.showClose"
            class="message-close"
            @click="closeMessage(message.id)"
          >
            ×
          </button>
        </div>
      </div>
    </transition-group>
  </teleport>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const messages = ref([])
let messageId = 0

const addMessage = (options) => {
  const id = ++messageId
  const message = {
    id,
    type: options.type || 'info',
    content: options.content || '',
    duration: options.duration !== undefined ? options.duration : 3000,
    showClose: options.showClose || false,
    onClose: options.onClose
  }

  messages.value.push(message)

  if (message.duration > 0) {
    setTimeout(() => {
      closeMessage(id)
    }, message.duration)
  }

  return id
}

const closeMessage = (id) => {
  const index = messages.value.findIndex(msg => msg.id === id)
  if (index > -1) {
    const message = messages.value[index]
    messages.value.splice(index, 1)
    if (message.onClose) {
      message.onClose()
    }
  }
}

const closeAll = () => {
  messages.value = []
}

// 暴露方法给外部调用
defineExpose({
  addMessage,
  closeMessage,
  closeAll
})
</script>

<style scoped lang="scss">
.message-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
}

.message-item {
  margin-bottom: 12px;
  pointer-events: auto;
  min-width: 300px;
  max-width: 500px;
}

.message-content {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #fff;
  border-left: 4px solid;
  position: relative;
}

.message-icon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  flex-shrink: 0;

  svg {
    width: 100%;
    height: 100%;
  }
}

.message-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

.message-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  margin-left: 12px;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    color: #666;
  }
}

// 不同类型的样式
.message-success {
  .message-content {
    border-left-color: #52c41a;
    background: #f6ffed;
  }

  .message-icon {
    color: #52c41a;
  }
}

.message-error {
  .message-content {
    border-left-color: #ff4d4f;
    background: #fff2f0;
  }

  .message-icon {
    color: #ff4d4f;
  }
}

.message-warning {
  .message-content {
    border-left-color: #faad14;
    background: #fffbe6;
  }

  .message-icon {
    color: #faad14;
  }
}

.message-info {
  .message-content {
    border-left-color: #1890ff;
    background: #f0f9ff;
  }

  .message-icon {
    color: #1890ff;
  }
}

// 动画效果
.message-enter-active {
  transition: all 0.3s ease;
}

.message-leave-active {
  transition: all 0.3s ease;
}

.message-enter-from {
  opacity: 0;
  transform: translateY(-20px);
}

.message-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>
